<template>
	<view class="container">
		<!-- 顶部 -->
		<view style="width: 100%;height: 10%;margin-bottom: 32px;" >
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="http://101.43.223.224:8765/image/getImageById?id=6756" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
					>
					<view style="float: left;">
						<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="../../static/哑铃.png" alt="">
						</image>
					</view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 中心 -->
		<view class="div1">
			<view style="width: 90%;height: 100%;;margin: 0 auto;overflow: none;">
				<!-- <view style="width: 95%;height: 4%;margin: 0 auto;">
					<view style="width: 70%;height: 100%;float: left;margin-left: 5%;">
						<span style="font-size: 22px;font-weight: 600;line-height: 5vh;color: rgba(46, 48, 76, 1);">推荐课程</span>
					</view>
					<view style="width: 25%;height: 100%;float: left;">
						<span style="font-size: 17px;font-weight: 400;line-height: 5vh;color: rgba(122, 124, 153, 1);">更多课程 ></span>
					</view>
				</view>
				<view style="width: 100%;height: 22%;" class="hd" @click="goClassDetail()">
					<view style="width: 38%; height: 90%; float: left; border-radius: 5px; overflow: hidden;margin-left: 24rpx;"v-for="(item, index) in courseimgDate">
						<image :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.images" class="img1" mode=""></image>
					</view>
				</view> -->
				<!-- 减肥食谱 -->
				<!-- <view style="width: 100%;height: 4%;"></view> -->
				<view style="width: 96%;height: 6%;margin: 0 auto;background: rgba(255, 255, 255, 0.4);border-radius: 5%;">
					<view style="width: 70%;height: 100%;float: left;margin-left: 5%;">
						<span style="font-size: 22px;font-weight: 600;line-height: 5vh;color: rgba(46, 48, 76, 1);float: left;margin-bottom: 2rpx;">减肥食谱</span>
					</view>
					<view style="width: 25%;height: 100%;float: left;" @click="goCookbook()">
						<span style="font-size: 17px;font-weight: 400;line-height: 5vh;color: rgba(122, 124, 153, 1);">更多食谱 ></span>
					</view>
				</view>
				<view style="width: 100%;height: 22%;" class="hd">
					<view style="width: 38%; height: 90%; float: left; border-radius: 5px; overflow: hidden;margin-left: 24rpx;"v-for="(item, index) in recipeDate">
						<image :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.recipeFileId" class="img1" mode="" @click="getXiangQing(item.recipeFileId)"></image>
					</view>
				</view>
				<!-- <view style="width: 100%;height: 4%;"></view> -->
				<!-- 热门推荐 -->
				<view style="width: 95%;height: 7%;margin: 0 auto;background: rgba(255, 255, 255, 0.4);border-radius: 5%;margin-bottom: 2%;">
					<view style="width: 70%;height: 100%;float: left;margin-left: 5%;">
						<span style="font-size: 22px;font-weight: 600;line-height: 5vh;color: rgba(46, 48, 76, 1);">热门推荐</span>
					</view>
				</view>
				<view style="width: 100%;height: 31%;margin: 0 auto;" class="zx">
					<view v-for="(item, index) in articleDate" @click="clickDetails(item.id)" style="height: 90%; margin-right: 2%; margin-bottom: 2%; width: 45%; float: left; border-radius: 9px; box-shadow: 10px 12px 14px  rgba(0, 0, 0, 0.25);margin-left: 2.2%;">
						<view class="div4">
							<image style="width: 100%;height: 100%; border-radius: 5px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.filePath" mode=""></image>
						</view>
						<view class="div5">
							<view class="div6">
								<span style="font-size: 12;font-weight: 400;line-height: 100%;padding-left: 5%; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: rgb(162,166,166);">{{ item.articleTitle }}</span>
							</view>
						</view>
					</view>
					<!--  -->
				</view>
			</view>
			
		</view>
		<view style="height: 8%;width: 100%;"></view>
		<!-- <view style="width: 100%;height: 8%;background-color: yellow;z-index: 999;">
			
		</view> -->
		<tabbar selected-index=0></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true,
				courseimgDate: [],
				recipeDate: [],
				articleDate: [],
				MemberuserDate: [],
				// values: 'orange',
				// src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				// text: '无头像'
			}
		},
		created() {
			this.courseimgload();
			this.recipeload();
			this.articleload();
			this.Memberuserload();
		},
			methods: {
				//食谱详情页面
				getXiangQing(recipeFileId){
					uni.navigateTo({
						url: '/pages/student/index/particulars?recipeFileId=' + JSON.stringify(recipeFileId)
					})
				},
				goCookbook(){
					uni.navigateTo({
						url: '/pages/student/index/cookbook',
						animationType: 'slide-out-top',
						animationDuration: 200
					})
				},
				// 点击跳转课程详情
				goClassDetail () {
					uni.navigateTo({
						url: '/pages/student/index/classDetail',
						animationType: 'slide-out-top',
						animationDuration: 200
					})
				},
				courseimgload() {
				    // 发起查询请求
				    uni.request({
				        url: 'http://127.0.0.1:17000/course/listimg',
				        method: "GET",
				        data: {
							
				    	},
				        success: (res) => {
				            if (res.statusCode === 200) {
				                // 将查询结果中的多个任务数据存储到 Coacharray 数组
				                this.courseimgDate = res.data.data;
				            } else {
				                // 处理请求失败的情况
				                uni.showToast({
				                    title: "请求失败",
				                    icon: "none"
				                });
				            }
				        },
				        fail: (error) => {
				            // 处理请求失败的情况
				            console.log(error)
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    });
				},
				recipeload() {
				    // 发起查询请求
				    uni.request({
				        url: 'http://127.0.0.1:17000/Recipe/listrecipeimg',
				        method: "GET",
				        data: {
							
				    	},
				        success: (res) => {
				            if (res.statusCode === 200) {
				                // 将查询结果中的多个任务数据存储到 Coacharray 数组
				                this.recipeDate = res.data.data;
				            } else {
				                // 处理请求失败的情况
				                uni.showToast({
				                    title: "请求失败",
				                    icon: "none"
				                });
				            }
				        },
				        fail: (error) => {
				            // 处理请求失败的情况
				            console.log(error)
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    });
				},
				articleload() {
				    // 发起查询请求
				    uni.request({
				        url: 'http://127.0.0.1:17000/Article/selectArticleList',
				        method: "GET",
				        data: {
							
				    	},
				        success: (res) => {
				            if (res.statusCode === 200) {
				                // 将查询结果中的多个任务数据存储到 Coacharray 数组
				                this.articleDate = res.data.data;
				            } else {
				                // 处理请求失败的情况
				                uni.showToast({
				                    title: "请求失败",
				                    icon: "none"
				                });
				            }
				        },
				        fail: (error) => {
				            // 处理请求失败的情况
				            console.log(error)
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    });
				},
				Memberuserload() {
				    // 发起查询请求
				    uni.request({
				        url: 'http://127.0.0.1:17000/memberUser/selectMemberHeadPortrait',
				        method: "GET",
				        data: {
							userId: uni.getStorageSync('userInfo').id
				    	},
				        success: (res) => {
				            if (res.statusCode === 200) {
				                // 将查询结果中的多个任务数据存储到 Coacharray 数组
				                this.MemberuserDate = res.data.data;
				            } else {
				                // 处理请求失败的情况
				                uni.showToast({
				                    title: "暂无头像",
				                    icon: "none"
				                });
				            }
				        },
				        fail: (error) => {
				            // 处理请求失败的情况
				            console.log(error)
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    });
				},
				clickDetails(id){
					uni.navigateTo({
						url: '/pages/student/index/articleDetails?id='+id
					})
				}
			}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
		width: 100%;
		height: 100vh;
		 /* display: flex; */
		justify-content: center;
		align-items: center;
		background-image: url('http://101.43.223.224:8765/image/getImageById?id=6755');
		background-size: cover; /* 使背景图片覆盖整个页面 */
		/* background-repeat:repeat-y; /* 根据y轴重复显示背景图片 */  
	}
	.div8{  
		width: 9%;
		height: 100%;
		/* background-color: green; */
		float: left;
	}
	.div7{
		width: 100%;
		height: 50%;
		/* background-color: red; */
	}
	.div6{
		width: 100%;
		height: 50%;
		margin-top: 7%;
	}
	.div5{
		width: 100%;
		height: 30%;
		/* background-color: yellow; */
	}
	.div4{
		width: 100%;
		height: 70%;
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;
	}
	.hd{
		overflow-x: auto;
	    display: -webkit-box;
	    -webkit-overflow-scrolling: touch;
	    margin: 0.5rem 0.5rem
	}
	.zx{
		/* overflow:auto; */
	    /* display: -webkit-box; */
	    -webkit-overflow-scrolling: touch;
	    margin: 0.5rem 0.5rem
	}
	.div1{
		width: 100%;
		height: 86%;
		background: rgba(255, 255, 255, 0.0);
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		overflow-y: auto;
		box-sizing: border-box;
		padding-top: 30px;
		padding-left: 5px;
		padding-right: 5px;
	}
	.img1{
		width: 100%;
		height: 100%;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
</style>